<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="24">
          <div style="margin-bottom: 6px;">1.请选择分类：</div>
          <div>
            <el-radio-group v-model="queryInfo.categoryId" @input="chooseCategory()">
                      <el-radio-button style="margin-right: 1px;" v-for="item in categoryList"  :key="Number(item.id)"
                                       :label="item.id" :value="Number(item.id)">{{item.name}}</el-radio-button>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="24">
          <div style="margin-bottom: 6px;">2.请选小分类：</div>
          <div>
          <el-radio-group v-model="queryInfo.subCategoryId" @input="chooseSubCategory()">
            <el-radio-button style="margin-left: 1px;" v-for="item in subCategoryList"  :key="Number(item.id)"
                           :label="item.id" :value="Number(item.id)">{{item.name}}</el-radio-button>
          </el-radio-group>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="24">
          <div style="margin-bottom: 6px;">3.请&nbsp;选&nbsp;规&nbsp;格：</div>
          <div>
            <el-radio-group v-model="queryInfo.tpId" @input="chooseTp()">
            <el-radio-button style="margin-left: 1px;" v-for="item in tpList"  :key="Number(item.id)"
                             :label="item.id" :value="Number(item.id)">{{item.name}}</el-radio-button>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-row :gutter="20" style="margin-top: 16px;">
        <el-col :span="4">
          <el-button type="warning" size="small" @click="showEditDialog('')">添加Sku</el-button>
        </el-col>
      </el-row>
      <el-table :data="skuList" border stripe>
        <el-table-column label="ID" prop="id" width="70"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="官方价格" prop="officialPrice"></el-table-column>
        <el-table-column label="售价" prop="price"></el-table-column>
        <el-table-column label="已售数量" prop="sold"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="Y"
                inactive-value="N"
                @change="updateStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="修改时间" prop="modifyTime" width="150"></el-table-column>
        <el-table-column label="修改" width="100">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="删除">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteSku(scope.row.id)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="顺序" prop="sortNum">
          <template slot-scope="scope">
            <el-button
                type="text"
                size="small"
                @click="moveUp(scope.row, scope.$index)"
                :disabled="scope.$index === 0">上移</el-button>
            <el-button
                type="text"
                size="small" style="margin-left:16px"
                @click="moveDown(scope.row, scope.$index)"
                :disabled="getFormLength(scope.$index)" >下移</el-button>
          </template>
        </el-table-column>
       
      </el-table>
    </el-card>

    <el-dialog title=" sku信息" :visible.sync="editDialogVisible" width="60%" @close="editDialogClosed">
      <el-form :model="editForm"  ref="editFormRef" label-width="130px" class="demo-ruleForm">
        <el-form-item label="sku名称" prop="name">
          <el-input v-model="editForm.name" style="width: 70%;"></el-input>
        </el-form-item>
        <el-form-item label="官方价格" prop="officialPrice">
          <el-input v-model="editForm.officialPrice" style="width: 10%;"></el-input>
          <span style="margin-left: 10px;">售价：</span><el-input v-model="editForm.price" style="width: 10%;"></el-input>
        </el-form-item>
        <el-form-item label="是否需要短信验证" prop="needSmsCode">
          <el-switch v-model="editForm.needSmsCode" active-color="#13ce66"
              inactive-color="#ff4949" active-value="Y" inactive-value="N"></el-switch>
        </el-form-item>
        <el-form-item label="短信说明"  v-if="editForm.needSmsCode=='Y'">
          <quill-editor
              v-model="editForm.needSmsCodeDesc"
              :options="editorOption"
              ref="myQuillEditor" style="width: 82%;height: 150px;"/><br/><br/>
        </el-form-item>
        <el-form-item label="注意事项" >
          <quill-editor
              v-model="editForm.note"
              :options="editorOption"
              ref="myQuillEditor" style="width: 82%;height: 150px;"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSku()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from "@/api/MemberCharge.js";

export default {
    data() {
      return {
        drawer: false,
        dialogVisible: false,
        disabled: false,
        categoryList:[],
        subCategoryList:[],
        activeName:'1',
        queryInfo: {
          id: "",
          name:'',
          categoryId:'',
          subCategoryId:'',
          tpId:'',
          pageNo: 1,
          pageSize: 20
        },
        editDialogVisible: false,
        subCategory:{

        },
        editForm: {
          id: '',
          tpId:'',
          needSmsCode:'N',
          needSmsCodeDesc:''
        },
        tpList: [],
        skuList:[],
        total: 0,
        editorOption: {
          //符文本编辑器的配置
          placeholder: "",
        },
      };
    },
    created() {
      this.getCategoryList();
    },
    watch: {
      'queryInfo.categoryId'(newVal, oldVal){
        console.log(oldVal+"-->"+newVal);
        this.getSubCategoryList(newVal);
      },
      'queryInfo.subCategoryId'(newVal, oldVal){
        console.log(oldVal+"-->"+newVal);
        this.getTpList(newVal);
      },
      'queryInfo.tpId'(newVal, oldVal){
        console.log(oldVal+"-->"+newVal);
        this.queryInfo.tpId = newVal;
        this.editForm.tpId = newVal;
        this.getSkuList(newVal);
      }
    },
    methods: {
      getCategoryList() {
        Api.getMemberChargeCategoryList({pageNo: 1, pageSize: 100}).then((res) => {
          if (res.success) {
            this.categoryList = res.data.records;
            this.queryInfo.categoryId = '';
            if(this.categoryList.length>0){
              var selCategory = this.categoryList[0];
              this.queryInfo.categoryId = selCategory.id;
              this.getSubCategoryList(this.queryInfo.categoryId);
            }
          } else {
            return this.$message.error("获取列表失败");
          }
        });
      },
      getSubCategoryList(categoryId) {
        Api.getMemberChargeSubCategoryList({'categoryId':categoryId}).then((res) => {
          if (res.success) {
            this.subCategoryList = res.data.records;
            this.tpList = [];
            this.queryInfo.subCategoryId = '';
            this.queryInfo.tpId = '';
            if(this.subCategoryList.length>0){
              this.queryInfo.subCategoryId = this.subCategoryList[0].id;
              this.getTpList(this.queryInfo.subCategoryId);
            }
          } else {
            return this.$message.error("获取列表失败");
          }
        });
      },
      chooseCategory(){
        console.log(this.queryInfo.categoryId);
        this.getSubCategoryList(this.queryInfo.categoryId);
      },
      chooseSubCategory(){
        console.log(this.queryInfo.subCategoryId);
      },
      chooseTp(){
        console.log(this.queryInfo.tpId);
      },
      getTpList(subCategoryId) {
        Api.getMemberChargeTpList({'subCategoryId':subCategoryId}).then((res) => {
          if (res.success) {
            this.tpList = res.data;
            this.queryInfo.tpId = '';
            if(this.tpList.length>0){
              this.queryInfo.tpId = this.tpList[0].id;
            }
          } else {
            this.tpList = [];
            return this.$message.error("获取列表失败");
          }
        });
      },
      getSkuList(tpId) {
        Api.getMemberChargeSkuList({'tpId':tpId}).then((res) => {
          if (res.success) {
            this.editForm.tpId = tpId;
            this.queryInfo.tpId = tpId;
            this.skuList = res.data;
          } else {
            this.editForm.tpId = '';
            this.skuList = [];
            return this.$message.error("获取列表失败");
          }
        });
      },
      updateStatus(row) {
        Api.setMemberChargeSkuStatus({'id':row.id, 'status':row.status}).then(res => {
          if (res.success) {
            this.$message.success('设置成功！')
          } else {
            return this.$message.error('设置失败！')
          }
        })
      },

      async showEditDialog(id) {
        Api.getMemberChargeSku({'id':id}).then(res => {
          if (res.success) {
            this.editForm = res.data;
            this.editForm.tpId = this.queryInfo.tpId;
            this.editDialogVisible = true
          } else {
            return this.$message.error('查询失败')
          }
        })
      },
      saveSku() {
        Api.saveMemberChargeSku(this.editForm).then((res) => {
          if (res.success) {
            this.$message.success("保存成功");
            this.editDialogVisible = false;
            this.getSkuList(this.queryInfo.tpId);
          } else {
            return this.$message.error("保存失败：" + res.msg);
          }
        });
      },
      editDialogClosed() {

      },
      // 下移
      moveDown(item, index) {
        this.skuList.splice(index + 2, 0, item);
        this.skuList.splice(index, 1);
        this.setMoveUpAndDown();
      },
      getFormLength(index) {
        if (index === this.skuList.length - 1) return true;
        else return false;
      },
      moveUp(item, index) {
        this.skuList.splice(index - 1, 0, item);
        this.skuList.splice(index + 1, 1);
        this.setMoveUpAndDown();
      },
      setMoveUpAndDown() {
        var ids = "";
        for( let i of this.skuList){
          ids = ids.concat(i.id, ",");
        }
        ids = ids.substr(0,ids.length-1);
        Api.setSkuUpAndDown({'ids':ids}).then(res => {
          if (res.success) {
          } else {
            return this.$message.error('设置失败')
          }
        })
      },
      deleteSku(id) {
        this.$confirm('确认删除吗？')
            .then(_ => {
              Api.deleteSku({'id':id}).then((res) => {
                if (res.success) {
                  this.getSkuList(this.queryInfo.tpId);
                  return this.$message.success("操作成功");
                } else {
                  return this.$message.error("操作失败：" + res.msg);
                }
              });
            }).catch(_ => {});
      }
    }
};
</script>

<style lang="less" scoped>
.logo_pic {
  max-width: 100px;
}
</style>
